<template>
  <section id="upcoming" class="py-16 md:py-24 bg-white">
    <div class="container mx-auto px-4">
      <!-- 标题区域 - 滚动显示动画 -->
      <div
        class="flex flex-col md:flex-row justify-between items-start md:items-center mb-12 scroll-animate"
      >
        <div>
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-primary mb-2">即将开拍</h2>
          <p class="text-gray-600 max-w-2xl">
            精选即将上线的拍卖专场，提前预览拍品，设置提醒不错过心仪珍品
          </p>
        </div>
        <router-link
          to="/all-auctions"
          class="mt-4 md:mt-0 inline-flex items-center text-primary font-medium hover:text-secondary transition-colors group"
        >
          查看全部专场
          <i
            class="fa fa-long-arrow-right ml-2 transition-transform duration-300 group-hover:translate-x-1"
          ></i>
        </router-link>
      </div>

      <!-- 专场卡片列表 - 带交错动画 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <div
          class="bg-neutral rounded-xl overflow-hidden shadow-md hover-lift scroll-animate"
          v-for="(auction, index) in upcomingAuctions"
          :key="index"
          :style="{ animationDelay: `${index * 0.15}s` }"
        >
          <div class="relative overflow-hidden">
            <img
              :src="auction.image"
              :alt="auction.title"
              class="w-full h-56 object-cover transition-transform duration-700 hover:scale-110"
            />
            <div
              class="absolute top-4 left-4 bg-primary text-white text-xs font-bold px-3 py-1 rounded-full transform transition-transform duration-300 hover:scale-110"
            >
              即将开拍
            </div>
          </div>
          <div class="p-6">
            <div class="flex justify-between items-start mb-3">
              <h3 class="text-xl font-bold text-dark">{{ auction.title }}</h3>
              <span class="text-sm text-gray-500">{{ auction.itemsCount }}件拍品</span>
            </div>
            <p class="text-gray-600 text-sm mb-4">{{ auction.description }}</p>
            <div class="flex items-center text-sm text-gray-500 mb-4">
              <i class="fa fa-calendar-o mr-2"></i>
              <span>{{ auction.date }}</span>
            </div>
            <div class="flex justify-between items-center">
              <div>
                <div class="text-xs text-gray-500">起拍价区间</div>
                <div class="text-primary font-semibold">{{ auction.priceRange }}</div>
              </div>
              <button
                class="bg-primary/10 hover:bg-primary/20 text-primary text-sm font-medium px-4 py-2 rounded-md transition-all duration-300 transform hover:scale-105"
                @click="setReminder(auction.id)"
              >
                设置提醒
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 即将开拍数据
const upcomingAuctions = ref([
  {
    id: 1,
    title: '古董玉器专场',
    image: 'https://picsum.photos/id/1055/600/400',
    itemsCount: 32,
    description: '汇聚明清时期精品玉器，包括和田玉、翡翠等珍贵材质',
    date: '2024年6月18日 10:00',
    priceRange: '¥80,000 - ¥2,600,000',
  },
  {
    id: 2,
    title: '近现代书画专场',
    image: 'https://picsum.photos/id/1062/600/400',
    itemsCount: 45,
    description: '包含张大千、齐白石等名家作品，极具收藏价值',
    date: '2024年6月20日 14:30',
    priceRange: '¥150,000 - ¥5,800,000',
  },
  {
    id: 3,
    title: '珠宝钟表专场',
    image: 'https://picsum.photos/id/1074/600/400',
    itemsCount: 28,
    description: 'Cartier、Patek Philippe等名表，钻石珠宝首饰',
    date: '2024年6月22日 09:00',
    priceRange: '¥200,000 - ¥3,200,000',
  },
])

// 设置提醒
const setReminder = (auctionId) => {
  ElMessage({
    message: '已设置提醒，开拍前将通知您',
    type: 'success',
  })
}

// 滚动动画观察器
const setupScrollAnimations = () => {
  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          entry.target.classList.add('animate-in')
          observer.unobserve(entry.target)
        }
      })
    },
    { threshold: 0.1 }
  )

  document.querySelectorAll('.scroll-animate').forEach((el) => {
    observer.observe(el)
  })
}

onMounted(() => {
  setupScrollAnimations()
})
</script>

<style scoped>
/* 滚动动画 */
.scroll-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-animate.animate-in {
  opacity: 1;
  transform: translateY(0);
}
</style>
